<%= javascript_include_tag '/assets/js/jquery.min', 'jquery-ujs', 'application' %>
<%= javascript_include_tag '/assets/bootstrap/js/bootstrap.min' %>
<%= javascript_include_tag '/assets/js/message.send' %>
<script src="/assets/js/jquery.dateFormate.min.js" charset="utf-8"></script>
<div class="row">
  <h4>客户组别管理</h4>
</div>
<div>


<hr>

</div>

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<div id="toolbar">
        <button id="remove" class="btn btn-danger">
            <i class="glyphicon glyphicon-remove"></i> 删除选中
        </button>
        <button data-toggle="modal" data-target="#newCustGroupModal" id="newCustBtn" class="btn btn-primary">
            <i class="glyphicon glyphicon-more"></i> 新建客户组
        </button>
        <button id="sendCust" class="btn btn-info">
            <i class="glyphicon glyphicon-add"></i> 对选中客户组的群发短信
        </button>

</div>


<table id="table"
               data-toggle="table"
               data-toolbar="#toolbar"
               data-height="428"
               data-url="/cust_groups/data"
               data-sort-order="desc"
               data-pagination="true"
                data-side-pagination="server"
                data-page-size="10"
                data-page-list="[5, 10, 25, 30, 50, 100]"
               >
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="_id.$oid">编号</th>
                <th data-field="name">客户组</th>
                <th data-field="created_at" data-formatter="localtimeFormatter">日期</th>
            </tr>
            </thead>
        </table>
    </div>
<script>
  function localtimeFormatter(value, row){
    var longDateFormat  = 'yyyy/MM/dd HH:mm:ss';

    return $.format.date(value, longDateFormat);
  }
    var $table = $('#table'),
        $button = $('#remove');
    $(function () {
        $button.click(function () {
            if (confirm("是否确认?")) {

              var _ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                $.get("/cust_groups/delete/"+row._id.$oid, function(){
                  console.log("正在服务端删除");

                });
                  return row._id;
              });
              $table.bootstrapTable('remove', {
                  field: '_id',
                  values: _ids
              }, function(){
                console.log("after delte");

              });
            }
            return false;



        });


        $("#sendCust").click(function(){

          var groups = $table.bootstrapTable('getSelections');
          if (groups.length == 0) {
            alert("请先勾选");
            return false;
          }
          $("#newMessageModal").modal('show');
          $("#uploadProgress").css('width', (current_count*100/total_message_count).toString()+'%')
          $("#newMessageModal").on('shown.bs.modal',function(){
            console.log(groups.length);
            var names = '';
            var total_message_count = 0
            var current_count = 0
            $("#uploadProgress").css('width', (current_count*100/total_message_count).toString()+'%')
            for (var i = 0; i < groups.length; i++) {
              names = names + ' | '+groups[i].name;
              $('#modal_title_group_name').html(names+" | ")
              var group_id =groups[i]._id.$oid;
              $.get('/cust_groups/group_users_count/'+group_id, function(data){
                total_message_count = total_message_count + parseInt(data);
                $("#total_message_count").html(total_message_count);
              });

            }//for
            $('#sendMessages').click(function(){
              for (var k = 0; k < groups.length; k++) {
                $.get('/cust_groups/group_users/'+groups[k]._id.$oid, function(data){
                  var obj =$.parseJSON(data);
                  for (var j = 0; j < obj.length; j++) {
                    current_count++;
                    $("#uploadProgress").css('width', (current_count*100/total_message_count).toString()+'%')
                    $('#current_count').html(current_count.toString());
                    var text = $("#textMessage").val();
                    console.log(obj[i].number);
                    sendSMS(text, obj[i].number);

                  }
                  total_message_count = 0
                  current_count = 0
                });

              }
            });


          });

        });


    });
</script>
<script charset="utf-8">
  function afterSubmit(){
    $("#newCustGroupModal").modal('hide');
    $("#newCustGroupModal").find("input")[1].value = ''
    $table.bootstrapTable('refresh');
    // console.log($("#newCustGroupModal").find("input")[0]);
  }
</script>

<div class="modal fade" id="newCustGroupModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">新建客户组</h4>
      </div>
      <% form_tag url(:cust_groups, :create, :format => :js), :remote => true do %>
      <div class="modal-body">

          <div class="form-group">
            <label for="exampleInputEmail1">客户组名称</label>
            <input name="group_name" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入客户组名称">
          </div>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
      <% end %>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="newMessageModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">发送短信给"<span id='modal_title_group_name'></span>"的所有用户</h4>
      </div>
      <% form_tag url(:messages, :new_send, :format => :js), :remote => true do %>
      <div class="modal-body">

          <div class="form-group">
            <label for="exampleInputEmail1">编辑消息</label>
            <textarea id="textMessage" class="form-control" name="text" rows="8" value="" placeholder="此处编辑您的信息">
            </textarea>
          </div>
          <div class="progress">
            <div id="uploadProgress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 1%">

            </div>
          </div>
          <div class="container">
            已发送 <span id="current_count">0</span>条/<span id="total_message_count">0</span>条
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="sendMessages" class="btn btn-primary">群发</button>
      </div>
      <% end %>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
